<template>
    <div class='crumb-container'>
        <el-row class="operate-box">
            <el-col>
                <div v-if="(pageLayer > 0 && pageLayer < 4)" class="grid-content">
                    <span class="shouye" @click="goToIndex">首页</span>
                    <span v-for="(item, i) in crumbList" :key="i" class="crumb-one" @click="goToOne(i)"> <span class="crumb-jian"> ></span> {{ item.name }}</span>
                </div>
                <div v-if="(pageLayer >= 4)" class="grid-content">
                    <span class="shouye" @click="goToIndex">首页</span>
                    <span class="crumb-one" @click="goToOne(0)"> <span class="crumb-jian"> ></span> {{ crumbList[0].name }} <span class="crumb-jian"> > </span> </span>
                    <span class="crumb-lue">
                        <span>...</span>
                    </span>
                    <span class="crumb-one" style="margin-left: 26px;" @click="goToOne(crumbList.length - 2)"> {{ crumbList[crumbList.length - 2].name }}</span>
                    <span class="crumb-one" @click="goToOne(crumbList.length - 1)"> <span class="crumb-jian"> ></span> {{ crumbList[crumbList.length - 1].name }}</span>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script setup lang='ts'>
import { CirclePlusFilled, DeleteFilled, Document, Rank, Search } from '@element-plus/icons-vue';
import { setStorage, getStorage, getStorageAll,removeStorage, clearStorage } from "../../utils/storage";
import { defineProps, getCurrentInstance, ref } from 'vue';
import Bus from "../../utils/bus";
const { proxy } = getCurrentInstance() as any;
const props = defineProps({
    'pageLayer': {
        'type': Number,
        'required': true,
        'default': 0
    },
	// 面包屑的信息
    'crumbList': {
        'type': Object,
        'default': () => ({})
    }
})

const wd = ref("")

const goToIndex = () => {
    Bus.emit('move-layer', 0)
}

const goToOne = (i: any) => {
    Bus.emit('move-layer', parseInt(i) + 1)
}


const created = () => {
    
};

created();
</script>
<style lang='scss' scoped>
.crumb-container {
    .operate-box {
        // line-height:50px;
        .grid-content {
            .crumb-one {
                font-weight: 500;
                color: #088D9E;
                &:last-child {
                    color: #94979E;
                }
                .crumb-jian {
                    color: #94979E;
                }
            }
            .crumb-lue {
                position: relative;
                color: #94979E;
                span {
                    position: absolute;
                    letter-spacing: 2px;
                    top: -3px;
                    left: 3px;
                }
            }
            .shouye {
                color: #088D9E !important;
            }
        }
    }
}
</style>